<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>redial-gradient-径向渐变</title>
	</head>

	<body>
		<!--
        background-image: radial-gradient(圆的类型? 渐变的大小? at 渐变的位置?, start-color, ..., last-color);
     -->
		<div></div>
		<style>
			div {
				height: 200px;
				width: 400px;
				/* 不支持渐变的浏览器回退方案 */
				background-color: #f07575;
				background-image:
                /* 默认椭圆形渐变，从中心位置向外渐变为teal，再从teal渐变到40% pink , 由于没写终点，pink将渐变到终点 */
                /* radial-gradient(orange 0%, teal 20%, pink 40%); */

                /* 默认椭圆形渐变，渐变终点在元素内部的x轴防线100px,y轴方向100px, */
                /* radial-gradient(at 100px 100px, red 5%, green 50%, blue) */

                /* 圆形渐变，终点在元素内部中点，一直渐变到距离中点最远的角 */
                /* radial-gradient(circle at center, red 0, blue 30%, green 100%) */

                /* 默认椭圆形渐变，渐变到距离中心最远的角，中心在 x：40px, y:40px 位置 */ radial-gradient(
					farthest-corner at 40px 40px,
					#f35 0%,
					#43e 100%
				);
			}
		</style>
	</body>
</html>
